<template>
	<div class="header">
		<div class="content-wrapper">
			<div class="avatar">
				<img :src="seller.avatar" width="64" height="64">
			</div>
			<div class="content">
				<div class="title">
					<span class="brand"></span>
					<span class="name">{{seller.name}}</span>
				</div>
				<div class="description">
					{{seller.description}}/{{seller.deliveryTime}}分钟送达
				</div>
				<div v-if="seller.supports" class="support">
					<span class="icon" :class="classMap[seller.supports[0].type]"></span>
					<span class="text">{{seller.supports[0].description}}</span>
					<span class="support-count" @click="showDetail">
						<span class="count">{{seller.supports.length}}个</span>
						<i class="icon-keyboard_arrow_right"></i>
					</span>
				</div>
			</div>
		</div>
		<div class="bulletin-wrapper" @click="showDetail">
			<span class="bulletin-title"></span>
			<span class="bulletin-text">{{seller.bulletin}}</span>
			<i class="icon-keyboard_arrow_right"></i>
		</div>
		<div class="header-bg">
			<img :src="seller.avatar" width="100%">
		</div>
		<transition name="drop">
			<div v-show="detailShow" class="detail">
				<div class="detail-wrapper clearfix">
					<div class="detail-main">
						<h1 class="name">{{seller.name}}</h1>
						<div class="star-wrapper">
							<star :size="48" :score="seller.score"></star>
						</div>
						<div class="title">
							<div class="line"></div>
							<div class="text">优惠信息</div>
							<div class="line"></div>
						</div>
						<ul v-if="seller.supports" class="suppourts">
							<li class="support-item" v-for="(item, index) in seller.supports" :key="index">
								<span class="icon" :class="classMap[item.type]"></span>
								<span class="text">{{item.description}}</span>
							</li>
						</ul>
						<div class="title">
							<div class="line"></div>
							<div class="text">商家公告</div>
							<div class="line"></div>
						</div>
						<div class="bulletin">
							<p class="content">{{seller.bulletin}}</p>
						</div>
					</div>
				</div>
				<div class="detail-close" @click="hideDetail">
					<i class="icon-close"></i>
				</div>
			</div>
		</transition>
	</div>
</template>

<script type="text/ecmascript-6">
	import star from 'components/star/star.vue';

	export default {
		components: {
			star
		},
		data() {
			return {
				detailShow: false
			};
		},
		props: {
			seller: {
				type: Object
			}
		},
		methods: {
			showDetail() {
				this.detailShow = true;
			},
			hideDetail() {
				this.detailShow = false;
			}
		},
		created() {
			this.classMap = ['decrease', 'discount', 'guarantee', 'special', 'invoice'];
		}
	};
</script>

<style lang="stylus" rel="stylesheet/stylus">
	@import "../../common/stylus/mixin.styl"
	.header
		position relative
		color #FFF
		background-color rgba(7, 17, 27, .5)
		.content-wrapper
			position relative
			padding 24px 12px 18px 24px
			font-size 0
			.avatar
				display inline-block
				vertical-align top
				img
					border-radius 2px
			.content
				display inline-block
				vertical-align top
				margin-left 16px
				.title
					margin 2px 0 8px
					font-size 0
					.brand
						display inline-block
						vertical-align top
						width 30px
						height 18px
						bg-img(brand)
						background-size cover
						background-repeat no-repeat
					.name
						margin-left 6px
						font-size 16px
						line-height 18px
						font-weight 700
				.description
					margin-bottom 10px
					line-height 12px
					font-size 12px
				.support
					.icon
						display inline-block
						vertical-align top
						width 12px
						height 12px
						margin-right 4px
						background-size cover
						background-repeat no-repeat
						&.decrease
							bg-img(decrease_1)
						&.discount
							bg-img(discount_1)
						&.invoice
							bg-img(invoice_1)
						&.special
							bg-img(special_1)
						&.guarantee
							bg-img(guarantee_1)
					.text
						line-height 12px
						font-size 10px
					.support-count
						position absolute
						right 12px
						bottom 12px
						padding 0 8px
						height 24px
						line-height 24px
						border-radius 14px
						background rgba(0, 0, 0, .2)
						.count,.icon-keyboard_arrow_right
							font-size 10px
		.bulletin-wrapper
			position relative
			height 28px
			line-height 28px
			padding 0 22px 0 12px
			white-space nowrap
			overflow hidden
			text-overflow ellipsis
			background-color rgba(7, 17, 27, .2)
			.bulletin-title
				display inline-block
				vertical-align top
				margin-top 8px
				width 22px
				height 12px
				bg-img('bulletin')
				background-size cover
				background-repeat no-repeat
			.bulletin-text
				font-size 12px
				margin 0 4px
			.icon-keyboard_arrow_right
				position absolute
				right 12px
				top 8px
				font-size 10px
		.header-bg
			position absolute
			left 0
			top 0
			width 100%
			height 100%
			z-index -1
			overflow hidden
			filter blur(10px)
		.detail
			position fixed
			left 0
			top 0
			z-index 100
			width 100%
			height 100%
			overflow-y auto
			transition all .3s
			transform translate3d(0, 0, 0)
			background-color rgba(7, 17, 27, .8)
			backdrop-filter blur(10px)
			&.drop-enter, &.drop-leave-active
				transform translate(0, -100%)
			.detail-wrapper
				width 100%
				min-height 100%
				.detail-main
					margin-top 64px
					padding-bottom 64px
					.name
						line-height 16px
						font-size 16px
						font-weight 700
						text-align center
						margin 0
					.star-wrapper
						margin-top 18px
						padding 2px 0
						text-align center
					.title
						display flex
						width 80%
						margin 28px auto 24px
						.line
							flex 1
							position relative
							top 6px
							border-top 1px solid rgba(255, 255, 255, .2)
						.text
							padding 0 12px
							font-size 14px
							font-weight 700
					.suppourts
						width 80%
						margin 0 auto
						padding 0
						.support-item
							list-style none
							padding 0 12px
							margin-bottom 12px
							font-size 0
							&:last-child
								margin-bottom 0
							.icon
								display inline-block
								vertical-align top
								width 16px
								height 16px
								margin-right 6px
								background-size cover
								background-repeat no-repeat
								&.decrease
									bg-img(decrease_2)
								&.discount
									bg-img(discount_2)
								&.invoice
									bg-img(invoice_2)
								&.special
									bg-img(special_2)
								&.guarantee
									bg-img(guarantee_2)
							.text
								line-height 16px
								font-size 12px
					.bulletin
						width 80%
						margin 0 auto
						.content
							padding 0 12px
							margin 0
							line-height 24px
							font-size 12px
			.detail-close
				position relative
				width 32px
				height 32px
				margin -64px auto
				clear both
				font-size 32px
</style>